Accessibility Note: Use of required vs aria-required (WCAG 2.1)

According to WCAG 2.1, it's important to use the correct attribute to indicate that a form field is required for assistive technologies. Here’s a breakdown of best practices:

✅ required (HTML5 native attribute)

• Should be used on native form elements like <input>, <select>, and <textarea>.
• Recognized by modern browsers and assistive technologies (e.g., screen readers).
• Triggers built-in form validation and provides sufficient accessibility information.
• No need to add aria-required="true" if required is already present on native elements.

✅ aria-required="true"

• Used only for custom form controls (e.g., a <div> with role="textbox").
• Ensures that assistive technologies know the field is required when native HTML validation is not available.
• Does not trigger browser-native form validation.

🔧 Best Practice

• Use required for all native HTML5 form elements.
• Use aria-required="true" only when building custom form components.
• Avoid adding both required and aria-required="true" to the same native element – it’s redundant.

📘 WCAG 2.1 References

• 3.3.1 Error Identification
• 4.1.2 Name, Role, Value